<template>
  <div id="app">
    <!-- <router-link to="/home" tag='button' replace >首页</router-link>
    <router-link to="/about" active-class="active">关于</router-link> -->
    <button @click="homeClick">首页</button>
    <button @click="aboutClick">关于</button>
    <button @click="userClick">用户</button>
    <router-link v-bind:to="'/user/' + userId1">用户1</router-link>
    <router-link :to="{ path: '/profile', query: { name: 'cgs', age: 18 } }"
      >档案</router-link
    >
    <button @click="profileClick">档案1</button>
    <!-- 当使用keep-alive标签，其内的router-view包含的组件会被记录，不会被销毁 -->
    <!-- 1.exclude属性，字符串或正则表达式，表示不包含该组件，注意exclude的字符串有多个组件时，逗号后面不要加空格 -->
    <!-- 1.include属性，字符串或正则表达式，表示包含该组件，注意include的字符串有多个组件时，逗号后面不要加空格 -->
    <keep-alive exclude="About,User">
      <router-view />
    </keep-alive>
    
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      userId: "lisi",
      userId1: "wangwu",
    };
  },
  methods: {
    homeClick() {
      // 通过代码的方式修改url
      //this.$router.replace('/home')
      this.$router.push("/home");
    },
    aboutClick() {
      this.$router.push("/about");
    },
    userClick() {
      this.$router.push("/user/" + this.userId); // 动态路由
    },
    profileClick() {
      this.$router.push({
        path: "/profile",
        query: {
          name: "cgs1",
          age: 19,
        },
      }); // 动态路由
    },
  },
};
</script>

<style>
.router-link-active {
  color: #f00;
}
.active {
  color: #f99;
}
.activeClass {
  color: #aa0;
}
</style>
